<template>
  <div class="mark" v-show="!markShow">
   <div class="singnInBox">
    <div class="cuccess">
      <img src="@/assets/images/Home/signInIcon.png">
      <span class="signInSuccess">签到成功</span>
      <p id="reachMsg" class="reachMsg">今天签过啦,明天再来吧</p>
    </div>
  </div>
  <div class="close">
    <div class="closeIcon" @click="closeSingIn"></div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'HomeAudition',
  data () {
    return {
      markShow: true
    }
  },
  methods: {
    showSingIn () {
      this.markShow = false
      // console.log('daye')
    },
    closeSingIn () {
      this.markShow = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .cuccess >>> img
    width 56%
  .cuccess >>> .reachMsg
    margin .15rem 0
  .mark
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.6)
    position fixed
    top 0
    left 0
    z-index 600
    .singnInBox
      width 80%
      height auto
      background #FFF
      position relative
      border-radius 0.2rem
      padding .2rem 0
      margin 40% auto 0
      .cuccess
        text-align center
      .signInSuccess
        color #3A79F7
        font-size 0.4rem
        display block
        padding-top .5rem
  .close
    display flex
    justify-content center
    padding-top .5rem
    .closeIcon
      border-radius 100%
      border 2px solid #fff
      width .5rem
      height .5rem
</style>
